<template>
  <div>
    <h2 class="title">能耗映射与规则</h2>
    <table class="table">
      <thead>
        <tr>
          <th>原水浊度区间</th>
          <th>水泵转速目标</th>
          <th>阀门开度目标</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="r in rules" :key="r.range">
          <td>{{ r.range }}</td>
          <td>{{ r.pumpRpmPct }}%</td>
          <td>{{ r.valveOpenPct }}%</td>
          <td>{{ r.note }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import type { EnergyRule } from '../types';

const rules: EnergyRule[] = [
  { range: '< 30 NTU', pumpRpmPct: 40, valveOpenPct: 50, note: '低泥沙：节能优先' },
  { range: '30 - 80 NTU', pumpRpmPct: 80, valveOpenPct: 70, note: '中泥沙：稳定运行' },
  { range: '> 80 NTU', pumpRpmPct: 100, valveOpenPct: 100, note: '高泥沙：满负荷保障' }
];
</script>

<style scoped>
.title { margin: 0 0 8px; font-size: 16px; }
.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.table th, .table td { border-bottom: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; }
.table thead { background: #f9fafb; }
</style>



